h1 {
  text-align: center;
}

body {
  text-align: center;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Это важно для прижатия футера к низу */
  margin: 0; /* Убираем стандартные отступы body */
}

main {
  flex: 1; /* Занимает все доступное пространство, выталкивая футер вниз */
}

img {
  max-width: 100%; /* Изображения не будут превышать ширину контейнера */
  height: auto;
  display: block; /* Убирает лишнее пространство под изображением */
  margin: 0 auto; /* Центрирование изображения */
}

/* Если хотите ограничить максимальную ширину изображений */
img.responsive {
  max-width: 600px; /* или любой другой размер */
}

p {
  color: red;
  height: 40px;
}

#serega {
  color: rgb(217, 0, 255);
  height: 20px;
}

html {
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  height: 100%; /* Важно для правильного расчета vh */
}

.button {
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #3e8e41;
}

#bottom {
  background-color: gray;
  width: 100%;
  margin-top: auto; /* Это помогает прижать футер к низу */
  padding: 10px 0;
}

ul, ol {
  text-align: left;
  margin-left: 0;
  padding-left: 20px;
}

@media (max-width: 768px) {
  #bottom {
    padding: 10px 0;
  }
}